<template>
  <div>
    <div class="new">
      <div class="u-title f-cb">
        <h3>
          <a href="javascript:;" class="f-ff2">优秀新电台</a>
        </h3>
      </div>
      <ul class="m-rdilist f-cb">
        <li v-for="(item, index) in recommendData" :key="index">
          <router-link :to="{path:'/home/djradio' , id:item.id}" class="u-cover u-cover-rdi2">
            <img :src="item.picUrl" alt="" />
          </router-link>  
          <h3 class="f-fs2">
            <router-link :to="{path:'/home/djradio' , id:item.id}" class="s-fc1" title="">{{ item.name }}</router-link>
          </h3>
          <p class="f-thide2 s-fc4">{{ item.rcmdtext }}</p>
        </li>
      </ul>
    </div>
    <div class="rdimore"> 
      <div class="u-title f-cb">
        <h3>
          <span class="f-ff2">电台排行榜</span>
        </h3>
      </div>
      <ul class="rdilist rdilist-2 f-cb">
        <li v-for="(item, index) in hotdata" :key="index">
          <router-link :to="{path:'/home/djradio' , query:{id:item.id}}" class="cvr u-cover u-cover-rdi f-fl">
            <img :src="item.picUrl" alt="" />
          </router-link>
          <div class="cnt">
            <h3 class="f-fs3">
              <router-link :to="{path:'/home/djradio' , query:{id:item.id}}">{{ item.name }}</router-link>
            </h3>
            <p class="note">
              <i class="u-icn u-icn-27"></i>
              <router-link :to="{path:'/userHome' , query:{id : item.dj.userId}}" class="sep f-brk" :title="item.dj.nickname">{{
                item.dj.nickname
              }}</router-link>
            </p>
            <p class="s-fc4">
              共{{ item.programCount }}期&nbsp;&nbsp;&nbsp;&nbsp;订阅{{
                item.subCount
              }}次
            </p>
          </div>
        </li>
      </ul>
      <div class="u-page">
          <el-pagination background layout="prev, pager, next" :total="340" :current-page=offset @current-change="a">
          </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { dj_type } from "../../../network/dj";
import { radio_hot } from "../../../network/dj";
export default {
  data() {
    return {
      id: "",
      offset:1,
      recommendData: [],
      hotdata: [],
    };
  },
  methods: {
    a(v){
       this.$router.push({path:'/home/discover/djradio',query:{id:this.id , limit : 30 , offset:(v - 1)*30}})
    },
    res_recommendDj(id) {
      dj_type(id).then(
        (res) => {
          this.recommendData = res.data.djRadios.slice(0, 5);
        },
        (err) => {
          console.log("主播电台/优秀新电台 获取失败");
        }
      );
    },
    res_hotDj(limit , offset , id) {
      radio_hot(limit , offset , id).then((res) => {  
        this.$parent.retard() //局部刷新
        this.hotdata = res.data.djRadios;
        sessionStorage.lastDj = JSON.stringify({recommendData : this.recommendData , hotdata:this.hotdata})
      });
    },
  },
  watch: {
    $route(to) {
      this.id = to.query.id 
      this.offset = to.query.offset ? parseInt(this.$route.query.offset)/30+1 : 1
      this.res_recommendDj(to.query.id);
      this.res_hotDj(30 , (this.offset-1)*30 , this.id);
    },
  },
  created() {
    this.id = this.$route.query.id 
    this.offset = this.$route.query.offset ? parseInt(this.$route.query.offset)/30+1 : 1
    if(sessionStorage.lastDj){
          var obj = JSON.parse(sessionStorage.lastDj)
          this.recommendData = obj.recommendData
          this.hotdata = obj.hotdata
    }else{
          this.res_recommendDj(this.$route.query.id);
          this.res_hotDj(30 , (this.offset-1)*30   ,this.id)
    }
  },
};
</script>

<style scoped>
.m-radio .new {
  margin-top: 10px;
}
.u-title {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.u-title h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p {
  padding: 0;
  margin: 0;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  color: #333;
}
.m-rdilist {
  margin: 16px 0 0 -37px;
}
.m-rdilist li {
  float: left;
  width: 150px;
  margin-left: 37px;
}
.u-cover-rdi2 {
  width: 150px;
  height: 150px;
}
.u-cover-rdi2 {
  width: 150px;
  height: 150px;
}
.u-cover {
  position: relative;
  display: block;
}
.u-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.m-rdilist h3 {
  margin: 13px 0 6px;
  line-height: 16px;
  font-size: 14px;
  font-weight: normal;
  color: #333;
}
.s-fc1 {
  color: #333;
}
.m-rdilist p {
  line-height: 18px;
}
.s-fc4 {
  color: #999;
  font-size: 12px;
}
.f-thide2,
.f-thide3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.m-radio .rdimore {
  margin-top: 35px;
}
.u-title {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
}
.u-title h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.u-title .tab-r {
  float: right;
}
.u-title .tab {
  margin: 12px 0 0 20px;
}
.u-title .tab a.z-sel {
  color: #c20c0c;
}
.u-title .tab .line {
  margin: 0 10px;
  color: #c7c7c7;
}
.u-title .tab a {
  color: #666;
}
.m-radio .rdilist {
  margin-left: -30px;
}
.m-radio .rdilist li {
  float: left;
  width: 435px;
  height: 120px;
  margin-left: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #e7e7e7;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.m-radio .rdilist .cvr {
  margin-right: -200px;
}
.u-cover-rdi {
  width: 120px;
  height: 120px;
}
.u-cover {
  position: relative;
  display: block;
}
.f-fl {
  float: left;
}
.u-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.m-radio .rdilist .cnt {
  margin-left: 140px;
}
.m-radio .rdilist-2 h3 {
  height: 64px;
  margin: 0;
  line-height: 64px;
}
.f-fs3 {
  font-size: 18px;
}
.m-radio .rdilist-2 h3 a {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}
.m-radio .rdilist .note {
  margin-bottom: 6px;
  line-height: 20px;
}
.u-icn,
.u-title-1 .out .icon {
  background: url("../../../assets/imgs/icon.png") no-repeat 0 9999px;
}
.u-icn-27 {
  background-position: -50px -300px;
}
.u-icn {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  width: 14px;
  height: 15px;
}
.m-radio .rdilist-2 .sep {
  margin-left: 5px;
  vertical-align: middle;
}
.f-brk {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.s-fc4,
a.s-fc4:hover {
  color: #999;
}
div.u-page {
    margin: 20px 0;
    text-align: center;
}
</style>